<template>
  <div class="root">
    <MyHeader title="购物车案例"></MyHeader>
    <!-- <MyHeader title="首页导航" bgColor="red" fontColor="green"></MyHeader> -->
    <MyGoods v-for="item in goodsList" 
    :key="item.id" :obj="item" ></MyGoods>
    <MyFooter></MyFooter>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyGoods from "./components/MyGoods.vue";
import MyFooter from "./components/MyFooter.vue";
import { getCartList } from "./api/cart.js"
/**
 * 需求：渲染购物车列表（使用MyGoods组件展示）
 * 1、保存购物车列表数据
 * 2、v-for循环MyGoods组件，并传数组中对象给MyGoods组件
 * 3、MyGoods组件中通过props中定义变量接收数据
 * 4、MyGoods组件中把接收到的数据渲染到对应的标签上即可
 * 
 * */ 
export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
  },
  data(){
    return {
      goodsList: []
    }
  },
  created(){
    getCartList().then(res=>{
      console.log(23,res)
      this.goodsList = res.data.list;
    })
  }
};
</script>

<style>
.root {
  padding-top: 45px;
}
</style>